<template>
	<div class="tabs">
		<li v-for="item in tabsData" class="tab">
			<router-link :to="item.path">
				<em class="iconfont" :class="item.icon"></em>
				<p>{{item.title}}</p>
			</router-link>
		</li>
	</div>
</template>

<script>
	export default {
		name: "Tabs",
		data(){
			return {
				tabsData: [
					{ title: "首页", path: "/home", icon: "icon-shouye" },
					{ title: "发现", path: "/discover", icon: "icon-iconfontzhizuobiaozhun023103" },
					{ title: "订单", path: "/order", icon: "icon-dingdan" },
					{ title: "我的", path: "/mine", icon: "icon-wode" }
				]
			}
		}
	}
</script>

<style>
	.tabs{
		width: 100%;
		height: 13.07vw;
		display: flex;
		position: absolute;
		left: 0;
		bottom: 0;
		border-top: 1px solid #ccc;
	}
	.tabs .tab{
		flex: 1;
		line-height: 5vw;;
		text-align: center;
	}
	.tabs .tab a{
		display: block;
		width: 100%;
		height: 100%;
		padding-top: 1.2vw;
		font-size: 2.93vw;
		color: #C2C2C2;
	}
	.tabs .tab em{
		font-size: 4.3vw;
	}
	.tabs .tab a.router-link-active{
		color: #007AFF;
	}
</style>